<template>
  <div>
    <div class="detailtabel">
      <div class="table_main">
        <el-row>
          <el-col :sm="12"  :lg="8">
            <div class="label">编号</div>
            <div class="content">{{tableData.id}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">用户ID</div>
            <div class="content">{{tableData.userId}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">创建时间</div>
            <div class="content">{{tableData.createTime}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">昵称</div>
            <div class="content">{{tableData.nickName}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">游戏类型</div>
            <div class="content">{{tableData.gameType ? tableData.gameType == 1? '王者': '吃鸡' : '未设置'}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">擅长位置</div>
            <div class="content">{{tableData.skill}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">头像</div>
            <div class="content" style="height: 98px;">
              <img style="width: 65px; height: 65px" :src="tableData.headImg">
            </div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">区服</div>
            <div class="content">{{tableData.area ? tableData.area == 1? '微信': 'qq' : '未设置'}}</div>
          </el-col>

          <el-col :sm="12" :lg="8">
            <div class="label">联系方式</div>
            <div class="content">{{tableData.contact}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">等级</div>
            <div class="content">{{tableData.level ? tableData.level : '未设置'}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">段位</div>
            <div class="content">{{tableData.dan}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">单价</div>
            <div class="content">{{tableData.price}}/每局</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">时长</div>
            <div class="content">{{tableData.payNum}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">支付金额</div>
            <div class="content">{{tableData.payMoney}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">安全保证金</div>
            <div class="content">{{tableData.safeMargin}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">效率保证金</div>
            <div class="content">{{tableData.efficiencyMargin}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">铭文等级</div>
            <div class="content">{{tableData.inscriptionsLevel ? tableData.inscriptionsLevel : '未设置'}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">英雄数量</div>
            <div class="content">{{tableData.heroNum ? tableData.heroNum : '未设置'}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">评分</div>
            <div class="content">{{tableData.score}}</div>
          </el-col>
          <el-col :sm="12" :lg="16">
            <div class="label">介绍</div>
            <div class="content">{{tableData.introduce}}</div>
          </el-col>
          <el-col :sm="24" :lg="24">
            <div class="label">图片</div>
            <div class="content">
              <img
                style="height: 200px"
                v-for="url in srcList"
                :key="url"
                :src="url"
                @click="preview(url)">
            </div>
          </el-col>
          <template v-if="type===1">
          <el-col :sm="12" :lg="8">
            <div class="label">封禁状态</div>
            <div class="content">
              <el-tag
                :type="tableData.state === 1 ? 'success' : 'info'"
                disable-transitions>{{tableData.state == 1? '正常': '封禁'}}</el-tag>
            </div>
          </el-col>
          <el-col :sm="12" :lg="8" v-if="tableData.state === 2">
            <div class="label">封禁原因</div>
            <div class="content">{{tableData.reason}}</div>
          </el-col>
          </template>
          <template v-if="type===2">
            <el-col :sm="12" :lg="8">
              <div class="label">审核状态</div>
              <div class="content">
                <el-tag
                  :type="tableData.result === 1 ? 'success' : tableData.result == 0? 'info': 'primary'"
                  disable-transitions>{{tableData.result == 0? '未审核': tableData.result == 1? '通过': '未通过' }}</el-tag>
              </div>
            </el-col>
          </template>
        </el-row>
      </div>
      <div class="footer">
        <template v-if="type===1">
          <el-button v-if="tableData.state === 1" type="primary" size="big" icon="el-icon-close" @click="queueRefuse()" >封禁</el-button>
          <el-button v-else type="primary" size="big" icon="el-icon-check" @click="queueClick()" >解除封禁</el-button>
        </template>
        <template v-if="type===2&&tableData.result === 0">
          <el-button type="primary" size="big" icon="el-icon-check" @click="onThrough()" >通过</el-button>
          <el-button type="primary" size="big" icon="el-icon-close" @click="onRefused()" >拒绝</el-button>
        </template>
      </div>
    </div>
    <!-- 图片放大 -->
    <el-dialog :visible.sync="dialogFormVisible"  width="50%" style="text-align: center;">
      <img :src="lookimg" alt="" style="max-width:100%;max-height: 100%;">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        lookimg: '',
        dialogFormVisible: false,
        reason: '',
        type: 1,
        tableData:{},
      }
    },
    computed: {
      srcList(){
        if(this.tableData.photo){
          return this.tableData.photo.split(';')
        }
        return []
      }
    },
    methods: {
      preview(url){
        this.lookimg = url
        this.dialogFormVisible = true
      },
      // 审核通过
      onThrough(){
        this.$confirm('是否通过该申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl2(`/whereas/review?id=${this.tableData.id}&result=1`),
            method: 'get',
            data: this.$http.adornData({
            })
          }).then(({status,data}) => {
            if(data.status == 0){
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }
          })
        });
      },
      // 审核拒绝
      onRefused(){
        this.$prompt('请输入拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消', 
          inputType: 'textarea'
        }).then(({ value }) => {
          this.$http({
            url: this.$http.adornUrl2(`/whereas/review?id=${this.tableData.id}&result=2&reason=${value}`),
            method: 'get',
            data: this.$http.adornData({
            })
          }).then(({status,data}) => {
            if(data.status == 0){
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }
          })
        });
      },
      //
      queueClick(){
        this.$confirm('是否解除封禁?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl2(`/whereas/banned?id=${this.tableData.id}&type=1`),
            method: 'get',
            data: this.$http.adornData({
            })
          }).then(({data}) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          })
        });
      },
      // 封禁
      queueRefuse(){
        this.$prompt('请输入封禁理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea'
        }).then(({ value }) => {
          this.$http({
            url: this.$http.adornUrl2(`/whereas/banned?id=${this.tableData.id}&type=2&reason=${value}`),
            method: 'get',
            data: this.$http.adornData({
            })
          }).then(({data}) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          })
        });
      },
      // 获取数据列表
      dataSelect () {
        let id = this.$route.query.id
        let type = this.$route.query.type*1 || 1
        this.type = type
        this.$http({
          url: this.$http.adornUrl2(type === 2?`/whereas/findReview?id=${id}`:`/whereas/findWhereas?id=${id}`),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({data}) => {
          if (data.status === 0) {
            let returnData = data.data;
            this.tableData = returnData;
          }
        })
      },
    },
    activated () {
      this.dataSelect()
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .table_main{
    .el-col{
      display: flex;
      .label{
        width: 140px;
        background-color: #fafafa;
        padding: 16px 24px;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
      .content{
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 24px;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
    }

  }
  .footer{
    margin-top: 10px;
    margin-left: 150px;
    .el-button{
      margin-right: 20px;
    }
  }
  .detailtabel .table_main{
    border: 1px solid #e8e8e8;
  }

</style>
